<template>
  <a-spin :spinning="loading">
    <table class="menu-content-attribute-field">
      <tbody>
        <tr>
          <td class="col1">
            <div style="display: flex">
              <div style="white-space: nowrap">文件名:&nbsp;&nbsp;</div>
              <div>{{ data.fileName }}</div>
            </div>
          </td>
          <td class="col2">
            <div style="display: flex">
              <div style="white-space: nowrap">文件类型:&nbsp;&nbsp;</div>
              <div>{{ data.fileType }}</div>
            </div>
          </td>
          <td class="col3">
            <div style="display: flex">
              <div style="white-space: nowrap">版本号:&nbsp;&nbsp;</div>
              <div>{{ data.fileVersion }}</div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="col1">
            <div style="display: flex">
              <div style="white-space: nowrap">文件编号:&nbsp;&nbsp;</div>
              <div>{{ data.fileCode }}</div>
            </div>
          </td>
          <td class="col2">
            <div style="display: flex">
              <div style="white-space: nowrap">上传者:&nbsp;&nbsp;</div>
              <div>{{ data.createdBy }}</div>
            </div>
          </td>
          <td class="col3">
            <div style="display: flex">
              <div style="white-space: nowrap">上传时间:&nbsp;&nbsp;</div>
              <div>{{ data.createdTime }}</div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="col1">
            <div style="display: flex">
              <div style="white-space: nowrap">修改时间:&nbsp;&nbsp;</div>
              <div>{{ data.updatedTime }}</div>
            </div>
          </td>
          <td class="col2">
            <div style="display: flex">
              <div style="white-space: nowrap">文件大小:&nbsp;&nbsp;</div>
              <div>{{ data.fileSizeShow }}</div>
            </div>
          </td>
          <td class="col3">
            <div style="display: flex">
              <div style="white-space: nowrap">文件标签:&nbsp;&nbsp;</div>
              <div>
                <a-tag
                  style="margin-bottom: 5px"
                  v-for="{ tagId, tagName } in data.labels || []"
                  :key="tagId"
                >
                  {{ tagName }}
                </a-tag>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="col1" colspan="3">
            <div style="display: flex">
              <div style="white-space: nowrap">文件备注:&nbsp;&nbsp;</div>
              <div>{{ data.fileNote }}</div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </a-spin>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import mockAPI from '@/api/simple-mock.js'
import { getFileDetail } from '@/api/db.js'
import { useDbType } from '@/views/db-management/provide-context.js'

/**
 * 全局
 */
let route = useRoute()
/**
 * 加载数据
 */
let loading = ref(false)
let data = ref({})
let dbType = useDbType()
onMounted(async () => {
  loading.value = true
  try {
    let result = await getFileDetail(
      {
        id: route?.params?.id,
      },
      dbType,
    )
    data.value = result?.data || {}
  } catch (e) {}
  loading.value = false
})
</script>
<style lang="less" scoped>
.menu-content-attribute-field {
  width: 100%;
  td {
    padding: 8px 10px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
  }
}
</style>
